<template>
  <div class="body-box">
    <div class="content-box">
      <div class="semi-enclosed-layout">
        <div class="left-sidebar">
          <div class="chart-module">
            <dv-border-box-8>
              <div class="chart-container">
                <h3 class="chart-title">文电办理情况</h3>
                <div class="pie-chart" id="doc-handle-chart"></div>
              </div>
            </dv-border-box-8>
          </div>
          <div class="chart-module">
            <dv-border-box-8>
              <div class="chart-container">
                <h3 class="chart-title">逾期办理情况</h3>
                <div class="pie-chart" id="overdue-handle-chart"></div>
              </div>
            </dv-border-box-8>
          </div>
          <div class="chart-module">
            <dv-border-box-8>
              <div class="chart-container">
                <h3 class="chart-title">尚需办理情况</h3>
                <div class="pie-chart" id="pending-handle-chart"></div>
              </div>
            </dv-border-box-8>
          </div>
        </div>

        <div class="main-content">
          <div class="main-indicator">
            <dv-border-box-12>
              <div class="main-chart-container">
                <h3 class="chart-title">岳阳市GDP分季度统计与区域分布</h3>
                <!-- 左侧统计图 + 右侧地图 -->
                <div class="combo-chart-container">
                  <!-- 左侧：统计图区域 -->
                  <div class="stats-wrapper">
                    <div class="stats-chart" id="stats-chart">
                      <!-- 上侧季度数值栏 -->
                      <div class="quarter-bars">
                        <div class="quarter-item">
                          <div class="quarter-label">第一季度</div>
                          <div class="quarter-bar q1">
                            <div class="bar-fill q1-fill"></div>
                          </div>
                          <div class="quarter-value">3300</div>
                        </div>
                        <div class="quarter-item">
                          <div class="quarter-label">第二季度</div>
                          <div class="quarter-bar q2">
                            <div class="bar-fill q2-fill"></div>
                          </div>
                          <div class="quarter-value">4400</div>
                        </div>
                        <div class="quarter-item">
                          <div class="quarter-label">第三季度</div>
                          <div class="quarter-bar q3">
                            <div class="bar-fill q3-fill"></div>
                          </div>
                          <div class="quarter-value">5500</div>
                        </div>
                        <div class="quarter-item">
                          <div class="quarter-label">第四季度</div>
                          <div class="quarter-bar q4">
                            <div class="bar-fill q4-fill"></div>
                          </div>
                          <div class="quarter-value">6600</div>
                        </div>
                      </div>

                      <!-- 下侧饼图区域 -->
                      <div class="pie-container">
                        <div class="pie-chart" id="industry-pie-chart"></div>
                        <div class="pie-annotations">
                          <div class="growth-label">同比增长 10%</div>
                          <div class="legend">
                            <div class="legend-item"><span class="color-dot industry"></span>工业</div>
                            <div class="legend-item"><span class="color-dot agriculture"></span>农业</div>
                            <div class="legend-item"><span class="color-dot commerce"></span>商业</div>
                            <div class="legend-item"><span class="color-dot other"></span>其他</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 右侧：岳阳市区域地图 -->
                  <div class="map-wrapper">
                    <div class="map" id="yueyang-map"></div>
                  </div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div class="secondary-indicator">
            <dv-border-box-8>
              <div class="secondary-chart-container">
                <h3 class="chart-title">财政收入增长比例</h3>
                <div class="line-chart" id="finance-income-chart"></div>
              </div>
            </dv-border-box-8>
          </div>
        </div>

        <div class="right-sidebar">
          <div class="chart-module">
            <dv-border-box-8>
              <div class="chart-container">
                <div class="work-progress-header">
                  <div class="arrow-icon">↻</div>
                  <h3 class="chart-title">重点工作进度</h3>
                </div>
                <div class="divider-line"></div>
                <div class="work-progress-chart" id="work-progress-chart"></div>
              </div>
            </dv-border-box-8>
          </div>
          <div class="chart-module">
            <dv-border-box-8>
              <div class="chart-container">
                <h3 class="chart-title">目标任务考核排名 TOP5</h3>
                <div class="ranking-chart" id="target-ranking-chart">
                  <div class="ranking-item" v-for="(item, index) in rankingData" :key="index">
                    <div class="rank-flag" :class="getRankClass(item.rank)" :data-rank="item.rank"></div>
                    <div class="rank-info">
                      <span class="dept-name">{{ item.name }}</span>
                      <div class="progress-bar">
                        <div class="bar-fill" :style="{ width: item.progress + '%' }"></div>
                      </div>
                    </div>
                    <span class="task-count">{{ item.count }}件</span>
                  </div>
                </div>
              </div>
            </dv-border-box-8>
          </div>
          <div class="chart-module">
            <dv-border-box-8>
              <div class="chart-container">
                <h3 class="chart-title">各类任务类型分布</h3>
                <div class="task-pie-chart" id="task-type-chart"></div>
              </div>
            </dv-border-box-8>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,

} from 'vue'
import * as echarts from 'echarts';
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import { useRouter } from 'vue-router'
import yueyangJson from "./yueyang.json"



export default defineComponent({
  setup() {
    const lastChar = location.href.substr(location.href.length - 1)
    const tabColor = ref(lastChar)
    const decorationColors = ['#568aea', '#000000']
    const loading = ref(true)
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })

    const router = useRouter()
    const shou = () => {
      router.push("/")
    }
    const tiao = () => {
      router.push("/wzh2")
    }
    const tiao2 = () => {
      router.push("/wzh3")
    }
    const tiao3 = () => {
      router.push("/sjk")
    }
    const tiao4 = () => {
      router.push("/sjk1")
    }
    const tiao5 = () => {
      router.push("/sjk2")
    }
    const tiao6 = () => {
      router.push("/mhr1")
    }
    const tiao7 = () => {
      router.push("/mhr2")
    }
    const tiao8 = () => {
      router.push("/mhr3")
    }
    const tiao9 = () => {
      router.push("/st1")
    }
    const tiao10 = () => {
      router.push("/st2")
    }
    const tiao11 = () => {
      router.push("/st3")
    }

    // 右边模块数据
    const rankingData = ref([
      { rank: 1, name: '财政局', progress: 100, count: 2200 },
      { rank: 2, name: '发改委', progress: 98.6, count: 2170 },
      { rank: 3, name: '教育局', progress: 98.4, count: 2164 },
      { rank: 4, name: '卫健局', progress: 52.5, count: 1154 },
      { rank: 5, name: '交通局', progress: 52.0, count: 1143 }
    ]);

    const getRankClass = (rank) => {
      switch (rank) {
        case 1: return 'first';
        case 2: return 'second';
        case 3: return 'third';
        default: return 'normal';
      }
    };

    const getProgressColor = (rank) => {
      return rank === 1 ? '#f59e0b' : '#3b82f6';
    };

    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()

    const initCharts = () => {
      // 饼图
      const docHandleDom = document.getElementById('doc-handle-chart');
      if (docHandleDom) {
        const chart = echarts.init(docHandleDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: { show: false, position: 'center' },
              emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
              labelLine: { show: false },
              data: [
                { value: 600, name: '已办结', itemStyle: { color: '#fbbf5e' } },
                { value: 2800, name: '正在办理', itemStyle: { color: '#36cbcb' } }
              ],
              center: ['50%', '50%'],
              itemStyle: { borderWidth: 2, borderColor: '#0f1931' },
              animation: true, animationDuration: 1500, animationEasing: 'cubicOut'
            }
          ],
          graphic: [
            { type: 'image', left: '42%', top: '38%', width: 40, height: 40, z: 10 },
            { type: 'text', left: '30%', top: '25%', z: 10, style: { text: '600', fill: '#fff', fontSize: 20, fontWeight: 'bold' } },
            { type: 'text', left: '30%', top: '70%', z: 10, style: { text: '2800', fill: '#fff', fontSize: 20, fontWeight: 'bold' } },
            { type: 'text', left: '70%', top: '25%', z: 10, style: { text: '已办结', fill: '#fbbf5e', fontSize: 14 } },
            { type: 'text', left: '70%', top: '70%', z: 10, style: { text: '正在办理', fill: '#36cbcb', fontSize: 14 } }
          ]
        };
        chart.setOption(option);
      }

      // 办理情况饼图
      const overdueHandleDom = document.getElementById('overdue-handle-chart');
      if (overdueHandleDom) {
        const chart = echarts.init(overdueHandleDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: { show: false, position: 'center' },
              emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
              labelLine: { show: false },
              data: [
                { value: 600, name: '已办结', itemStyle: { color: '#fbbf5e' } },
                { value: 2600, name: '正在办理', itemStyle: { color: '#36cbcb' } }
              ],
              center: ['50%', '50%'],
              itemStyle: { borderWidth: 2, borderColor: '#0f1931' },
              animation: true, animationDuration: 1500, animationEasing: 'cubicOut'
            }
          ],
          graphic: [
            { type: 'image', left: '42%', top: '38%', width: 40, height: 40, z: 10 },
            { type: 'text', left: '30%', top: '25%', z: 10, style: { text: '600', fill: '#fff', fontSize: 20, fontWeight: 'bold' } },
            { type: 'text', left: '30%', top: '70%', z: 10, style: { text: '2600', fill: '#fff', fontSize: 20, fontWeight: 'bold' } },
            { type: 'text', left: '70%', top: '25%', z: 10, style: { text: '已办结', fill: '#fbbf5e', fontSize: 14 } },
            { type: 'text', left: '70%', top: '70%', z: 10, style: { text: '正在办理', fill: '#36cbcb', fontSize: 14 } }
          ]
        };
        chart.setOption(option);
      }

      // 饼图
      const pendingHandleDom = document.getElementById('pending-handle-chart');
      if (pendingHandleDom) {
        const chart = echarts.init(pendingHandleDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: { show: false, position: 'center' },
              emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
              labelLine: { show: false },
              data: [
                { value: 600, name: '5天内需办理', itemStyle: { color: '#fbbf5e' } },
                { value: 2600, name: '10天内需办理', itemStyle: { color: '#36cbcb' } },
                { value: 500, name: '15天内需办理', itemStyle: { color: '#f26544' } }
              ],
              center: ['50%', '50%'],
              itemStyle: { borderWidth: 2, borderColor: '#0f1931' },
              animation: true, animationDuration: 1500, animationEasing: 'cubicOut'
            }
          ],
          graphic: [
            { type: 'image', left: '42%', top: '38%', width: 40, height: 40, z: 10 },
            { type: 'text', left: '30%', top: '20%', z: 10, style: { text: '600', fill: '#fff', fontSize: 20, fontWeight: 'bold' } },
            { type: 'text', left: '30%', top: '50%', z: 10, style: { text: '2600', fill: '#fff', fontSize: 20, fontWeight: 'bold' } },
            { type: 'text', left: '30%', top: '80%', z: 10, style: { text: '500', fill: '#fff', fontSize: 20, fontWeight: 'bold' } },
            { type: 'text', left: '70%', top: '20%', z: 10, style: { text: '5天内需办理', fill: '#fbbf5e', fontSize: 14 } },
            { type: 'text', left: '70%', top: '50%', z: 10, style: { text: '10天内需办理', fill: '#36cbcb', fontSize: 14 } },
            { type: 'text', left: '70%', top: '80%', z: 10, style: { text: '15天内需办理', fill: '#f26544', fontSize: 14 } }
          ]
        };
        chart.setOption(option);
      }

      // 饼图
      const industryPieDom = document.getElementById('industry-pie-chart');
      if (industryPieDom) {
        const chart = echarts.init(industryPieDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          title: {
            text: '',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#fff',
              fontSize: 14,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '产业构成',
              type: 'pie',
              radius: ['25%', '40%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: (params) => {

                  if (params.name === '商业') {
                    return `{label|${params.name}}
{value|${params.percent}%}`;
                  }
                  return `{label|${params.name}}`;
                },
                rich: {
                  label: {
                    color: '#fff',
                    fontSize: 12,
                    align: 'center',
                    padding: [2, 0]
                  },
                  value: {
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 'bold',
                    backgroundColor: 'rgba(139, 92, 246, 0.8)',
                    borderRadius: 4,
                    padding: [2, 4]
                  }
                }
              },
              labelLine: {
                show: true,
                length: 20,
                length2: 30,
                lineStyle: {
                  color: '#fff',
                  width: 1
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              },
              data: [
                {
                  value: 40,
                  name: '工业',
                  itemStyle: {
                    color: '#fbbf5e'
                  }
                },
                {
                  value: 30,
                  name: '农业',
                  itemStyle: {
                    color: '#36cbcb'
                  }
                },
                {
                  value: 20,
                  name: '商业',
                  itemStyle: {
                    color: '#8b5cf6'
                  }
                },
                {
                  value: 10,
                  name: '其他',
                  itemStyle: {
                    color: '#74A8F9'
                  }
                }
              ],
              itemStyle: {
                borderWidth: 2,
                borderColor: '#0f1931'
              },
              animation: true,
              animationDuration: 1500,
              animationEasing: 'cubicOut'
            }
          ],

        };
        chart.setOption(option);
      }

      // 岳阳市地图
      const mapDom = document.getElementById('yueyang-map');
      if (mapDom && yueyangJson) {
        echarts.registerMap('yueyang', yueyangJson);
        const chart = echarts.init(mapDom);
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              const data = Array.isArray(params) ? params[0] : params;
              return `<div style="color:#74A8F9">
                <div>${data.name}</div>
                <div>GDP: ${(Math.random() * 1000 + 500).toFixed(0)} 亿元</div>
              </div>`;
            }
          },

          series: [
            {
              type: 'map',
              map: 'yueyang',
              roam: false,
              label: {
                show: true,
                color: '#74A8F9',
                fontSize: 12,
                fontWeight: 'bold'
              },
              emphasis: {
                // 鼠标悬停时的样式
                itemStyle: {
                  areaColor: '#42a5f5'
                }
              },
              label: {
                show: true,
                color: '#ffffff' // 城市名称文字颜色
              },
              itemStyle: {
                areaColor: '#2196f3', // 地图区域底色
                borderColor: '#ffffff', // 区域边框颜色
                borderWidth: 1
              },
              data: [
                { name: '岳阳楼区', value: 1200 },
                { name: '云溪区', value: 650 },
                { name: '君山区', value: 580 },
                { name: '岳阳县', value: 920 },
                { name: '华容县', value: 880 },
                { name: '湘阴县', value: 950 },
                { name: '平江县', value: 820 },
                { name: '汨罗市', value: 1050 },
                { name: '临湘市', value: 780 }
              ]
            }
          ]
        };
        chart.setOption(option);
      }



      // 折线图
      const financeIncomeDom = document.getElementById('finance-income-chart');
      if (financeIncomeDom) {
        const chart = echarts.init(financeIncomeDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
          },
          legend: { top: '5%', right: '5%', textStyle: { color: '#d3d6dd' }, data: ['同比', '环比'] },
          grid: { left: '3%', right: '4%', bottom: '3%', top: '20%', containLabel: true },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)', fontSize: 12 },
            axisTick: { show: false }
          },
          yAxis: {
            type: 'value',
            name: '%',
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)', fontSize: 12 },
            splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)', type: 'dashed' } }
          },
          series: [
            {
              name: '同比',
              type: 'line',
              smooth: true,
              areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(54,203,203,0.5)' }, { offset: 1, color: 'rgba(54,203,203,0.1)' }]) },
              data: [20, 35, 70, 58, 38, 40, 60, 75, 80, 60, 55, 38],
              itemStyle: { color: '#36cbcb' },
              lineStyle: { color: '#36cbcb' }
            },
            {
              name: '环比',
              type: 'line',
              smooth: true,
              areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(54,90,255,0.5)' }, { offset: 1, color: 'rgba(54,90,255,0.1)' }]) },
              data: [30, 50, 50, 70, 60, 38, 38, 65, 80, 60, 35, 25],
              itemStyle: { color: '#568aea' },
              lineStyle: { color: '#568aea' }
            }
          ],
          animation: true,
          animationDuration: 1500
        };
        chart.setOption(option);
      }

      // 初始化重点工作进度图表
      const workProgressDom = document.getElementById('work-progress-chart');
      if (workProgressDom) {
        const chart = echarts.init(workProgressDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          series: [
            {
              type: 'pie',
              radius: ['70%', '85%'],
              center: ['50%', '50%'],
              label: { show: false },
              data: [
                {
                  value: 3000, name: '任务总数', itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: '#a3e635' },
                      { offset: 1, color: '#60a5fa' }
                    ])
                  }
                }
              ],
              itemStyle: { borderWidth: 0 }
            },
            {
              type: 'pie',
              radius: ['50%', '65%'],
              center: ['50%', '50%'],
              label: { show: false },
              data: [
                {
                  value: 1888, name: '未反馈', itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: '#60a5fa' },
                      { offset: 1, color: '#93c5fd' }
                    ])
                  }
                }
              ],
              itemStyle: { borderWidth: 0 }
            },
            {
              type: 'pie',
              radius: ['30%', '45%'],
              center: ['50%', '50%'],
              label: { show: false },
              data: [
                { value: 999, name: '不达标', itemStyle: { color: '#f59e0b' } }
              ],
              itemStyle: { borderWidth: 0 }
            }
          ],
          graphic: [
            {
              type: 'text',
              left: '60%',
              top: '25%',
              z: 10,
              style: {
                text: '任务总数 3000',
                fill: '#a3e635',
                fontSize: 14,
                fontWeight: 'bold',
                textAlign: 'center'
              }
            },
            {
              type: 'text',
              left: '60%',
              top: '45%',
              z: 10,
              style: {
                text: '未反馈 1888',
                fill: '#60a5fa',
                fontSize: 14,
                fontWeight: 'bold',
                textAlign: 'center'
              }
            },
            {
              type: 'text',
              left: '60%',
              top: '65%',
              z: 10,
              style: {
                text: '不达标 999',
                fill: '#f59e0b',
                fontSize: 14,
                fontWeight: 'bold',
                textAlign: 'center'
              }
            }
          ],
          animation: true,
          animationDuration: 1500
        };
        chart.setOption(option);
      }

      // 形饼图
      const taskTypeDom = document.getElementById('task-type-chart');
      if (taskTypeDom) {
        const chart = echarts.init(taskTypeDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          series: [
            {
              type: 'pie',
              radius: ['35%', '65%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: (params) => {
                  return `{name|${params.name}}
{value|${params.value}件，${params.percent}%}`;
                },
                rich: {
                  name: {
                    color: '#fff',
                    fontSize: 12,
                    fontWeight: 'bold'
                  },
                  value: {
                    color: '#d1d5db',
                    fontSize: 10
                  }
                }
              },
              labelLine: {
                show: true,
                length: 20,
                length2: 30
              },
              data: [
                { value: 800, name: '分解任务', itemStyle: { color: '#10b981' } },
                { value: 600, name: '市委重点工作', itemStyle: { color: '#3b82f6' } },
                { value: 400, name: '市委领导批录', itemStyle: { color: '#06b6d4' } },
                { value: 300, name: '72件类', itemStyle: { color: '#f59e0b' } },
                { value: 200, name: '其他', itemStyle: { color: '#ec4899' } }
              ],
              itemStyle: { borderWidth: 2, borderColor: '#0f1931' }
            }
          ],
          animation: true,
          animationDuration: 1500
        };
        chart.setOption(option);
      }

    }

    onMounted(() => {
      cancelLoading()
      handleTime()
      windowDraw()
      calcRate()
      initCharts()
    })

    onUnmounted(() => {
      unWindowDraw()
      clearInterval(timeInfo.setInterval)
    })

    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }

    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
      }, 1000)
    }

    const tab = (index) => {
      tabColor.value = index
      router.push(`/tab${index}`)
    }

    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      tabColor,
      tab,
      tiao,
      tiao2,
      shou,
      tiao3,
      tiao4,
      tiao5,
      tiao6,
      tiao7,
      tiao8,
      tiao9,
      tiao10,
      tiao11,
      getRankClass,
      rankingData
    }
  }
})
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;

  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url("../../assets/pageBg.png");
    background-size: cover;
    background-position: center center;
  }

  .host-body {

    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }

    .dv-dec-10-s {
      transform: rotateY(180deg);
    }

    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }

    .title {
      position: relative;
      display: flex;
      width: 500px;
      height: 100%;
      margin-top: 15px;
      text-align: center;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url("../../assets/logo.0a9934bd.png");

      .title-text {
        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }
    }

    .aside-width {
      width: 100%;
      margin-top: 15px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .react-right {
      &.react-l-s {
        text-align: right;
        width: 500px;
      }

      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .body-box {
      .content-box {
        width: 100%;
        height: 100%;
        margin-top: 30px;

        .semi-enclosed-layout {
          display: flex;
          height: 800px;
          gap: 20px;

          .left-sidebar {
            width: 25%;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .chart-module {
              flex: 1;
              min-height: 0;

              .chart-title {
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                padding: 8px 0;
                color: #fff;
                background: rgba(15, 19, 37, 0.8);
              }

              .chart-container {
                height: calc(100% - 40px);
                padding: 10px;
              }

              .pie-chart {
                width: 100%;
                height: 100%;
              }
            }
          }

          .main-content {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .main-indicator {
              flex: 2;
              min-height: 0;

              .main-chart-container {
                height: calc(100% - 50px);
                padding: 15px;

                .combo-chart-container {
                  display: flex;
                  width: 100%;
                  height: 100%;
                  gap: 10px;

                  .stats-wrapper {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    .stats-chart {
                      width: 100%;
                      height: 100%;
                      border-radius: 8px;
                      background: linear-gradient(135deg, #0f1325, #1a1f33);
                      border: 1px solid rgba(116, 168, 249, 0.3);
                      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                      padding: 15px;
                      position: relative;
                      overflow: hidden;

                      /* 上侧季度数值栏 */
                      .quarter-bars {
                        height: 35%;
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        margin-bottom: 20px;

                        .quarter-item {
                          display: flex;
                          align-items: center;
                          gap: 15px;
                          height: 25px;

                          .quarter-label {
                            width: 70px;
                            color: #fff;
                            font-size: 12px;
                            font-weight: bold;
                            text-align: right;
                          }

                          .quarter-bar {
                            flex: 1;
                            height: 20px;
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 0;
                            overflow: hidden;
                            position: relative;

                            .bar-fill {
                              height: 100%;
                              border-radius: 0;
                              transition: width 0.8s ease;
                            }

                            &.q1 .bar-fill {
                              background: linear-gradient(90deg, #8b5cf6, #3b82f6);
                              width: 50%;
                            }

                            &.q2 .bar-fill {
                              background: linear-gradient(90deg, #60a5fa, #1d4ed8);
                              width: 66.7%;
                            }

                            &.q3 .bar-fill {
                              background: linear-gradient(90deg, #10b981, #f59e0b);
                              width: 83.3%;
                            }

                            &.q4 .bar-fill {
                              background: linear-gradient(90deg, #f97316, #f59e0b);
                              width: 100%;
                            }
                          }

                          .quarter-value {
                            color: white;
                            font-size: 14px;
                            font-weight: bold;
                            min-width: 60px;
                            text-align: right;
                          }
                        }
                      }

                      /* 下侧饼图区域 */
                      .pie-container {
                        height: 65%;
                        display: flex;
                        gap: 15px;

                        .pie-chart {
                          flex: 2;
                          height: 100%;
                        }

                        .pie-annotations {
                          flex: 1;
                          display: flex;
                          flex-direction: column;
                          justify-content: space-between;

                          .growth-label {
                            color: #fbbf5e;
                            font-size: 14px;
                            font-weight: bold;
                            text-align: center;
                            padding: 8px;
                            background: rgba(251, 191, 94, 0.1);
                            border-radius: 6px;
                            border: 1px solid rgba(251, 191, 94, 0.3);
                          }

                          .legend {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;

                            .legend-item {
                              display: flex;
                              align-items: center;
                              gap: 8px;
                              color: white;
                              font-size: 12px;

                              .color-dot {
                                width: 12px;
                                height: 12px;
                                border-radius: 50%;

                                &.industry {
                                  background: #fbbf5e;
                                }

                                &.agriculture {
                                  background: #36cbcb;
                                }

                                &.commerce {
                                  background: #8b5cf6;
                                }

                                &.other {
                                  background: #74A8F9;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }

                  .map-wrapper {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    .map {
                      width: 100%;
                      height: 80%;
                      border-radius: 4px;
                      background-color: rgba(15, 19, 37, 0.5);
                    }

                    .map-data-tags {
                      display: flex;
                      flex-wrap: wrap;
                      gap: 8px;
                      padding: 5px;
                      background-color: rgba(15, 19, 37, 0.5);
                      border-radius: 4px;

                      .tag-item {
                        padding: 3px 8px;
                        background-color: rgba(54, 203, 203, 0.3);
                        border-radius: 2px;
                        font-size: 12px;
                        color: #fff;
                      }
                    }
                  }


                }
              }
            }

            .secondary-indicator {
              flex: 1;
              min-height: 0;

              .secondary-chart-container {
                height: calc(100% - 40px);
                padding: 10px;
              }

              .line-chart {
                width: 100%;
                height: 100%;
              }
            }
          }

          .right-sidebar {
            width: 20%;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .chart-module {
              flex: 1;
              min-height: 0;

              .chart-title {
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                padding: 8px 0;
                color: #fff;
                background: rgba(15, 19, 37, 0.8);
              }

              .chart-container {
                height: calc(100% - 40px);
                padding: 10px;
                display: flex;
                flex-direction: column;
                gap: 10px;
                position: relative;

                // 重点工作进度模块样式
                .work-progress-chart {
                  flex: 2;
                  height: 60%;
                  background: linear-gradient(135deg, #0f1325, #1a1f33);
                  border-radius: 8px;
                  border: 1px solid rgba(116, 168, 249, 0.3);
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                }

                .progress-annotations {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  padding: 10px 0;

                  .progress-item {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    color: #fff;
                    font-size: 12px;

                    .color-dot {
                      width: 12px;
                      height: 12px;
                      border-radius: 50%;

                      &.task-total {
                        background: linear-gradient(90deg, #10b981, #3b82f6);
                      }

                      &.un-feedback {
                        background: linear-gradient(90deg, #3b82f6, #6366f1);
                      }

                      &.not-standard {
                        background: #f59e0b;
                      }
                    }

                    .progress-label {
                      flex: 1;
                      font-weight: bold;
                    }

                    .progress-value {
                      font-weight: bold;
                      color: #f59e0b;
                    }
                  }
                }

                // 目标任务考核排名模块样式（进一步缩小版）
                .ranking-chart {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  gap: 6px;
                  padding: 6px;

                  .ranking-item {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    height: 28px;
                    background: rgba(15, 19, 37, 0.9);
                    border-radius: 3px;
                    padding: 0 8px;
                    border: 1px solid rgba(116, 168, 249, 0.2);

                    .rank-flag {
                      width: 16px;
                      height: 16px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 9px;
                      font-weight: bold;
                      color: #fff;

                      &.first {
                        background: #f59e0b;
                        border-radius: 2px;

                        &::before {
                          content: '🏆';
                          font-size: 10px;
                        }
                      }

                      &.second {
                        background: #9ca3af;
                        border-radius: 2px;

                        &::before {
                          content: '🏆';
                          font-size: 9px;
                          opacity: 0.8;
                        }
                      }

                      &.third {
                        background: #a16207;
                        border-radius: 2px;

                        &::before {
                          content: '🏆';
                          font-size: 8px;
                          opacity: 0.6;
                        }
                      }

                      &.normal {
                        background: #06b6d4;
                        border-radius: 50%;

                        &::before {
                          content: attr(data-rank);
                          font-size: 8px;
                        }
                      }
                    }

                    .rank-info {
                      flex: 1;
                      display: flex;
                      align-items: center;
                      gap: 8px;

                      .dept-name {
                        font-size: 11px;
                        color: #fff;
                        font-weight: bold;
                        min-width: 40px;
                        white-space: nowrap;
                      }

                      .progress-bar {
                        flex: 1;
                        height: 3px;
                        background: rgba(255, 255, 255, 0.1);
                        border-radius: 2px;
                        overflow: hidden;

                        .bar-fill {
                          height: 100%;
                          border-radius: 2px;
                          transition: width 0.8s ease;

                          &:first-child {
                            background: #f59e0b;
                          }

                          &:not(:first-child) {
                            background: #3b82f6;
                          }
                        }
                      }
                    }

                    .task-count {
                      font-size: 10px;
                      color: #d1d5db;
                      font-weight: bold;
                      min-width: 35px;
                      text-align: right;
                    }
                  }
                }

                // 各类任务类型分布模块样式
                .task-pie-chart {
                  flex: 2;
                  height: 60%;
                  background: linear-gradient(135deg, #0f1325, #1a1f33);
                  border-radius: 8px;
                  border: 1px solid rgba(116, 168, 249, 0.3);
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                  position: relative;
                }

                .file-icon {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  font-size: 24px;
                  opacity: 0.8;
                  z-index: 1;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>